<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    onload=function(){
        var interest=myform.interest;
        myform.checkAll.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(!interest[i].checked){
                    interest[i].checked=true;
                }
            }
        }
        myform.checkNo.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(interest[i].checked){
                    interest[i].checked=false;
                }
            }
        }
        myform.inverse.onclick=function(){
            for(var i=0; i<interest.length; i++){
                if(interest[i].checked){
                    interest[i].checked=false;
                }else{
                    interest[i].checked=true;
                }
            }
        }
    }
</script>
<form name="myform">
    <input type="checkbox" name="interest" value="看电影">看电影
    <input type="checkbox" name="interest" value="听音乐">听音乐
    <input type="checkbox" name="interest" value="演奏乐器">演奏乐器
    <input type="checkbox" name="interest" value="打篮球">打篮球
    <input type="checkbox" name="interest" value="看书">看书
    <input type="checkbox" name="interest" value="上网">上网
    <p>
        <input type="button" name="checkAll" value="全选">
        <input type="button" name="checkNo" value="全不选">
        <input type="button" name="inverse" value="反选">
    </p>
</form>
</body>
</html>